<template>
	<view class="playWrap" :style="{background: showBgImg ? `url(${curMusicInfo.picurl})no-repeat 10% 10%` : ''}">
		<scroll-view scroll-y="true" class="scrollWrap" :enable-back-to-top="true">
			<view class="songNameWrap">
				<button type="default" @tap="skipTwoMins">跳过2分钟</button>
				<view class="songName">{{ curMusicInfo.name }}</view>
				<view class="singer">{{ curMusicInfo.singer }}</view>
			</view>
			<view class="picAndLyrics">
				<view class="pic">
					<i class="iconfont" :class="globalPlayStatus?stopIcon:playIcon" @tap="playOrPause"></i>
					<image class="playbar" src="../../static/playPageImg/playbar.png" mode="aspectFit"></image>
					<view class="sepicWrap">
						<image :class="globalPlayStatus?picanimation:picanimationPaused" class="sepic" :src="curMusicInfo.picurl" style="width: 280rpx; height: 280rpx;" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<view class="lyrics">
				<scroll-view scroll-y="true">
					<view></view>
				</scroll-view>
			</view>
			<view class="guesslike">
				<text>喜欢这首歌的人也听</text>
				<view class="songlist">
					<song-sheet :bageType="'picture'" :simiSongInfoList="simiSongInfoList"></song-sheet>
				</view>
			</view>
			<view class="topComments" id="comments">
				<text>精彩评论</text>
				<comments :commentsList="commentsList"></comments>
			</view>
		</scroll-view>
	</view>

</template>

<script>
	import songsheet from '../../components/songsheet.vue'
	import comments from '../../components/comments.vue'
	import { mapState,mapMutations } from 'vuex'
	export default {
		props: {
			songInfo: {
				type: Array,
				default: function() {
					return []
				}
			}
		},
		data() {
			return {
				showBgImg: false,
				playStatus: false,
				simiSongInfoList: [],
				musicInfo: {},
				commentsList: null, // 初始不明类型的数据需要定义为null,如果直接定义为数组则vue不能监听到对象内的变化
				picanimation: 'picanimation',
				picanimationPaused: 'picanimation picanimationPaused',
				playIcon: 'iconfont icon-media-play-03',
				stopIcon: 'iconfont icon-zantingtingzhi1',
				lyrics: null,
				boxId: null
			}
		},
		computed:{
			...mapState(['globalPlayStatus', 'curTapIndex', 'globalPlayList', 'curMusicInfo'])
		},
		methods: {
			...mapMutations(['updateGlobalSimiSongInfoList', 'changePlayStatus', 'changeStopStatus', 'changeCurMusicInfo', 'changeCurTapIndex', 'changeGlobalPlayList']),
			// 点击图标播放或暂停歌曲
			playOrPause(){
				if (this.globalPlayStatus) {
					// 如果当前是播放状态，则暂停播放器，并更新状态为暂停状态
					this.$player.pause()
					this.changeStopStatus()
					this.playStatus = this.globalPlayStatus
				} else {
					this.$player.play()
					this.changePlayStatus()
					this.playStatus = this.globalPlayStatus
				}
			},
			playSong(index){
				let musicInfo = this.globalPlayList[index]
				this.$player.title = musicInfo.name
				this.$player.singer = musicInfo.singer
				this.$player.coverImgUrl = musicInfo.picurl
				this.$player.src =  `https://music.163.com/song/media/outer/url?id=${musicInfo.mid}.mp3`
			},
			// 跳过歌曲2分钟
			skipTwoMins(){
				this.$player.seek(120)
			},
			// 请求歌曲详情
			getMusicInfo(mid, that){
				uni.request({
					url: `${that.$http.vercelUrl}/song/detail?ids=${mid}`,
					success: res => {
						// console.log('play.vue歌曲详情：',res)
						let musicInfo = {
							mid,														// 歌曲id(用于获取对应的播放url)
							name: res.data.songs[0].name,							// 音乐名
							icon: 'iconfont icon-media-play-03', 			// 设置播放字体图标,以控制对应歌曲的播放按钮图标
							picurl: res.data.songs[0].al.picUrl,  		// 专辑图链接
							singer: res.data.songs[0].ar[0].name,			// 歌手名
							playUrl: `https://music.163.com/song/media/outer/url?id=${mid}.mp3`	// 播放链接
						}
						that.changeCurMusicInfo(musicInfo)
					},
					fail: (e) => { console.log('获取歌曲详情失败:', e)}
				})
			},
			// 请求歌词
			getLyrisc(mid, that){
				uni.request({
					url: `${that.$http.vercelUrl}/lyric?id=${mid}`,
					success(res){
						// console.log('play.vue歌词',res.data);
						// let lyricsString = res.data.lrc.lyric
					}
				})
			},
			// 请求相似歌曲
			getSimiMusics(mid, that){
				uni.request({
					url: `${that.$http.vercelUrl}/simi/song?id=${mid}`,
					success(res) {
						// console.log(res);
						that.simiSongInfoList = res.data.songs.splice(0, 3)
						that.simiSongInfoList.forEach((item, index ,array) => {
							array[index].icon = 'iconfont icon-media-play-03'
						})
					  // similarSongs[0].name(songName)  .id(mid) .artists.name(singerName) .picUrl(pictureUrl)
					}
				})
			},
			// 请求热门评论(20条)
			getComments(mid, that){
				uni.request({ // type:资源类型，0   1   2    3   4    5    6
											//       				歌曲 mv 歌单 专辑 电台 视频 动态
											// sortType: 排序方式,1:按推荐排序,2:按热度排序,3:按时间排序
					url: `${that.$http.vercelUrl}/comment/new?type=0&id=${mid}&sortType=2`,
					success(res) {
						// console.log('play页面未处理热评数据：', res.data.data.comments);
						let commentsArray = res.data.data.comments
						that.commentsList = []
						commentsArray.forEach((item, index, array) => {
							that.commentsList[index] = {
								likeCount: array[index].likedCount,	// 点赞数
								commentId: array[index].commentId,	// 评论的ID
								commentTime: array[index].time,			// 提交评论的时间
								content: array[index].content,			// 评论内容
								mid: mid,															// 资源id
								liked: array[index].liked,										// 当前用户是否点赞 true:点赞，false:未点赞
								userId: array[index].user.userId, 					// 评论者ID
								userName: array[index].user.nickname,				// 评论者昵称
								userAvatarUrl: array[index].user.avatarUrl,	// 评论者头像
							}
						})
						// console.log("play页面处理后的热评数据：", that.commentsList);
					},
					fail(e) {
						uni.showToast({
							title: '请求热评失败',
							icon: 'none'
						})
					}
					
				})
			}
		},
		components: {
			songSheet : songsheet,
			comments
		},
		onShow() {
		},
		onLoad(option){
			setTimeout(()=>{
				this.showBgImg = true
			},500)
			this.playStatus = this.globalPlayStatus
			let that = this
			
			
			// 播放歌曲
			// this.playSong(option.index)
			
			// 请求歌曲详情
			this.getMusicInfo(option.mid, that)
			
			// 请求歌词
			this.getLyrisc(option.mid, that)
			
			// 请求相似歌曲
			this.getSimiMusics(option.mid, that)
			
			// 请求热门评论(20条)
			this.getComments(option.mid, that)

			
			function playNextSong() {
				that.changeCurTapIndex(that.curTapIndex + 1)
				that.changeCurMusicInfo(that.globalPlayList[that.curTapIndex])
				that.$player.title = that.curMusicInfo.name
				that.$player.singer = that.curMusicInfo.singer
				that.$player.coverImgUrl = that.curMusicInfo.picurl
				that.$player.src =  `https://music.163.com/song/media/outer/url?id=${that.curMusicInfo.mid}.mp3`
				if (!that.$player.paused) {
					console.log('当播放器是播放状态时');
					that.getMusicInfo(that.curMusicInfo.mid, that)
					that.getLyrisc(that.curMusicInfo.mid, that)
					that.getSimiMusics(that.curMusicInfo.mid, that)
					that.getComments(that.curMusicInfo.mid, that)
					that.$forceUpdate()
				} else {
					uni.showToast({
						title: '当前歌曲需要VIP，将为您切换下一首',
						icon: 'none',
						success() {
							playNextSong()
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.playWrap {
	width: 100%;
	height: 100%;
	.scrollWrap {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.79);
		backdrop-filter: blur(18px);
		.songNameWrap {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			color: white;
			.songName {
				font-size: 37rpx;
				margin: 10rpx 0;
			}
			.singer {
				font-size: 25rpx;
			}
		}
		.picAndLyrics {
			position: relative;
			width: 100%;
			height: 56%;
			.pic {
				width: 66%;
				height: 60%;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				z-index: 5;
				background: url(https://s2.music.126.net/style/web2/img/ie6/singlecover.png?1b6ba82) no-repeat;
				background-size: cover;
				.playbar {
					position: absolute;
					top: -137rpx;
					left: 220rpx;
					z-index: 10;
					width: 42%;
					height: 54%;
				}
				.sepicWrap {
					width: 100%;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					.sepic {
						border-radius: 50%;
						overflow: hidden;
					}
				}
				
				.iconfont {
					display: block;
					position: absolute;
					top: 50%;
					left: 50%;
					z-index: 6;
					transform: translate(-50%, -50%);
					font-size: 120rpx;
				}
				.icon-media-play-03 {
					color: rgba(255,255,255, .7);
				}
				.icon-zantingtingzhi1 {
					color: rgba(255,255,255, .7);
				}
			}
		}
		.guesslike {
			text {
				display: block;
				padding: 16px 10px;
				color: #FFFFFF;
				font-weight: 500;
				font-size: 38rpx;
			}
		}
		.topComments {
			width: 100%;
			height: 100%;
			padding-left: 20rpx;
			text {
				display: block;
				padding: 16px 3px;
				color: #FFFFFF;
				font-weight: 500;
				font-size: 38rpx;
			}
		}
	}
}

</style>
